<template>
  <div>
    <!--外边灰框-->
    <div style="width: 1300px;margin:0 auto;background-color: whitesmoke;border: 1px; padding: 40px;border-radius: 20px;">
      <!--面包屑-->
      <el-row style="height:40px">
        <el-breadcrumb separator="/" style="margin-left: 10px">
          <el-breadcrumb-item :to="{ path: '/' }"><a href="/home">首页</a></el-breadcrumb-item>
          <el-breadcrumb-item>急救指南</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>

      <!--急救指南-->
      <el-card v-for="(firstLevel,index) in aidLists" :key="index" style="border-radius: 5px; box-shadow: 0 0 5px #878a8f; margin-bottom: 20px;background-color: white">
        <p class="div_p" style="position: absolute;z-index: 1;font-size: 30px ">{{ firstLevel.title }}</p>
        <img :src="firstLevel.bgImg" style="width:100%">
          <div style="padding: 40px;margin-bottom: 40px">
          <li v-for="item in firstLevel.items" :key="item.id" class="div_li">
              <a class="aid_keywords" :href="'/aidDetail?aidId='+item.id">{{ item.keyWord }}</a>
          </li>
          </div>
      </el-card>

      <!--板块结束-->
    </div>


  </div>
</template>
<style>
.a{
  text-decoration: none;
  color: #4a4a4a;
}

.aid_li {
  width: 185px;
  height: 30px;
}

.aid_name{
  color: #333333;
}
.aid_name:visited {
  color:#4a4a4a;
}
.aid_name:hover {
  color: #8CDADB;
}

/*整体*/
body{
  margin: 0 auto;
  padding: 0;
}


.div_li{
  float: left;
  margin-right: 50px;
  font: 15px "微软雅黑 Light";
}
p{
  font: 18px "微软雅黑";
}
.div_p{
  color: white;
  margin:70px 30px
}
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 2px solid #00cb8e;
  color: #00cb8e;
}
.sub-title{
  font-size: 20px;
}
.el-card div{
  padding:0;
}
.aid_keywords{
  color: #333333;
    font-size: 18px;
}


</style>
<script>
import index from "vuex";
import BaseUrl from "@/http/BaseUrl";

export default {
  data(){
    return{

        item:'',
        activeTab: "2",
        aidLists: [
            {title:'常见急救',bgImg:'/img/aid_1.jpg',items: []},
            {title:'家庭急救',bgImg:'/img/aid_2.jpg',items: []},
            {title:'疾病突发',bgImg:'/img/aid_3.jpg',items: []},
            {title:'户外急救',bgImg:'/img/aid_4.jpg',items: []}
        ]
    }
  },
  methods: {
      loadVaccineList(aidType) {
          let url = BaseUrl.INDEX+`/aid/aidList/${aidType}`;
          this.axios.get(url).then(response => {
              this.aidLists[aidType - 1].items = response.data.data;
          })
      },

  },
  created() {
      this.loadVaccineList(1);
      this.loadVaccineList(2);
      this.loadVaccineList(3);
      this.loadVaccineList(4);
  },
  mounted() {
  }
}
</script>